$(document).ready(function () {
  pageThree.initPage();
});
var pageThree = {
  data: [
    {
      starName: 'weiyunpeng',
      starIntro: '愿世界更美好',
      foodimg: 'https://image.meiye.art/pic_1632546045428QDzBCqrhjAh2zFrI2GQyW?imageMogr2/thumbnail/450x/interlace/1',
      foodName: '愿世界更美好',
      foodIntro: '我来了，我看见，I come, I see',
      foodSrc: 'https://weiyunpeng.github.io/wei/?p=about.md',
    },
    {
      starName: 'weiyunpeng',
      starIntro: '愿世界更美好',
      foodimg: 'https://image.meiye.art/pic_1628409195384?imageMogr2/thumbnail/450x/interlace/1',
      foodName: '愿世界更美好',
      foodIntro: '愿世界更美好',
      foodSrc: 'https://weiyunpeng.github.io',
    },
    {
      starName: 'weiyunpeng',
      starIntro: '愿世界更美好',
      foodimg: 'https://image.meiye.art/pic_1628403453450?imageMogr2/thumbnail/450x/interlace/1',
      foodName: '愿世界更美好',
      foodIntro: '愿世界更美好',
      foodSrc: 'https://weiyunpeng.github.io',
    },
    {
      starName: 'weiyunpeng',
      starIntro: '愿世界更美好',
      foodimg: 'https://image.meiye.art/pic_1628403504467?imageMogr2/thumbnail/450x/interlace/1',
      foodName: '守艺',
      foodIntro: '守望传统，致敬匠心',
      foodSrc: 'https://weiyunpeng.github.io',
    },
  ],
  isInit: false,
  tipPng: null,
  closePng: null,
  loadPage: null,
  loadPer: null,
  articleBox: null,
  detailBox: null,
  detailEnergy: null,
  detailEnergyBar: null,
  threePlanet: null,
  PLANET_AIXIN: 0,
  PLANET_JQ: 1,
  PLANET_DP: 2,
  PLANET_CL: 3,
  /**
   * 初始化页面
   */
  initPage: function () {
    var self = this;
    self.initThreePlanet();
    self.initHandler();
    self.initData();
    self.initEvent();
  },
  initHandler: function () {
    var self = this;
    if (self.isInit) return;
    self.isInit = true;
    self.indexHandler();
  },
  /**
   * 初始化数据
   */
  initData: function () {
    var self = this;
    self.articleBox = $('article');
    self.tipPng = $('#ts');
    self.detailBox = $('aside.detail');
    var detailBody = self.detailBox.children('.body');
    self.detailEnergy = detailBody.children('.energy');
    self.detailEnergyBar = self.detailEnergy.children('.bar');
    self.closePng = $('.page2');
    self.loadPage = $('aside.loadPage');
    self.loadPer = self.loadPage.children('.per');
  },
  /**
   * 初始化星球
   */
  initThreePlanet: function () {
    var self = this;
    // 初始化星球
    var onPlanetInit = function () {
      self.threePlanet.initPlanet();
    };
    // 选择星球
    var onPlantSelect = function (index) {
      console.log('onPlantSelect: ' + index);
      switch (index) {
        case self.PLANET_AIXIN:
          self.detailHandle(self.PLANET_AIXIN);
          break;
        case self.PLANET_JQ:
          self.detailHandle(self.PLANET_JQ);
          break;
        case self.PLANET_DP:
          self.detailHandle(self.PLANET_DP);
          break;
        case self.PLANET_CL:
          self.detailHandle(self.PLANET_CL);
          break;

        default:
          break;
      }
    };

    var loadPlanetRes = function () {
      var loader = new PxLoader();
      loader.addImage('images/skybox/skybox1x.jpg');
      loader.addImage('images/skybox/skybox2x.jpg');
      loader.addImage('images/skybox/negx.jpg');
      loader.addImage('images/skybox/negy.jpg');
      loader.addImage('images/skybox/negz.jpg');
      loader.addImage('images/skybox/posx.jpg');
      loader.addImage('images/skybox/posy.jpg');
      loader.addImage('images/skybox/posz.jpg');
      loader.addImage('images/common/bg.jpg');

      //实际加载进度
      loader.addProgressListener(function (e) {
        var per = Math.round((e.completedCount / e.totalCount) * 10);
        load_timer();
        function load_timer() {
          per = per || 0;
          per += imath.randomRange(1, 3);
          per = per > 100 ? 100 : per;
          self.loadPer.html(per + '%');
          if (per < 100) setTimeout(load_timer, 80, per);
          else if (per == 100) {
            self.loadPage.hide();
          }
        }
      });

      loader.addCompletionListener(function () {
        self.threePlanet = $('#planet').ThreePlanet({
          onPlantSelect: onPlantSelect,
          onInit: onPlanetInit,
        });

        loader = null;
      });
      loader.start();
    };
    loadPlanetRes();
  },
  /**
   * 返回星际
   */
  threePlanetBack: function () {
    var self = this;
    if (self.threePlanet) {
      self.threePlanet.back();
    }
  },
  /**
   * 初始化事件
   */
  initEvent: function (box, detailsUrl) {
    var self = this;
    // 点击提示
    self.tipPng.on('touchend', function (e) {
      e.preventDefault();
      icom.fadeOut(self.tipPng, 500);
      self.threePlanet.show();
      self.articleBox.removeClass('init');
    });

    // 关闭详情
    if (box) {
      $('.btnClose').on('touchend', function (e) {
        e.preventDefault();
        self.closePng.hide();
        // $(this).off();
        box.transition({ scale: 0.5, opacity: 0 }, 250, function () {
          box.hide();
          //返回星际
          self.threePlanetBack();
        });
      });
      // 打开详情内容页
      box.find('a.brand-name').on('touchend', function (e) {
        e.preventDefault();
        window.location.href = detailsUrl;
      });
    } else {
      $('.backBtn').on('touchend', function (e) {
        e.preventDefault();
        self.closePng.hide();
        //返回星际
        self.threePlanetBack();
      });
    }
  },
  /**
   * index
   */
  indexHandler: function () {
    var self = this;
    icom.fadeIn(self.tipPng, 600);
  },
  /**
   * 打开详情
   */
  detailHandle: function (id) {
    var self = this;
    self.detailOpen(id);
    //打开关闭提示弹窗
    // self.watchPlanet(id);
  },
  detailEnergyBarMove: function () {
    var self = this;
    var per = imath.randomRange(0, 100) * 0.01;
    // $('...').transition(options, [duration], [easing], [complete])
    self.detailEnergyBar.transition({ height: per * 3.35 + 'rem' }, imath.randomRange(500, 1000), function () {
      self.detailEnergyBarMove();
    });
  },
  watchPlanet: function (id) {
    // var self = this;
    // self.closePng.show();
    // // 打开详情
    // $('.open-details').on('touchend', function () {
    //   self.closePng.hide();
    //   self.detailOpen(id);
    //   self.detailEnergyBarMove();
    // });
  },
  detailOpen: function (index) {
    var self = this;
    var box = self.detailBox;
    box.show();
    box.transition({ scale: 1, opacity: 1 }, 250);
    var title = box.children('.title');
    var starLine = title.children('p.line');
    starLine.css({ scaleX: 0 }).show().transition({ scaleX: 1, delay: 1000 }, 500);
    var starIntro = title.children('p.txt').html(self.data[index].starIntro);
    starIntro.css({ scaleX: 0 }).show().transition({ scaleX: 1, delay: 1000 }, 500);
    var body = box.children('.body');
    var bg = body.children('.bg');
    bg.css({ height: 0, top: 50 + '%' })
      .show()
      .transition({ height: 100 + '%', top: 0, delay: 250 }, 500);
    var cont = body.children('.cont');
    var foodPic = cont.children('p.pic');
    foodPic.find('img').attr('src', self.data[index].foodimg);
    foodPic.css({ scaleX: 0 }).show().transition({ scaleX: 1, delay: 500 }, 750);
    var foodName = cont.children('h4').html(self.data[index].foodName);
    foodName.css({ scaleX: 0 }).show().transition({ scaleX: 1, delay: 1400 }, 750);
    $('.detail .cont .txt').remove();
    $('<p class="txt"></p>').appendTo('.detail .cont');
    $('.detail .cont .txt').html(self.data[index].foodIntro).hide();
    // box.find('a.btnJd').attr('href', self.data[index].foodSrc);
    // box.find('a.brand-name').attr('href', self.data[index].foodSrc);
    var cor = box.find('a.btnJd .brand i').hide();
    setTimeout(function () {
      $('.detail .cont .txt').textillate({
        in: {
          effect: 'typeIn',
          shuffle: false,
          delayScale: 1,
          delay: 80,
          callback: function () {
            var cor = box.find('a.btnJd .brand i');
            cor
              .eq(0)
              .css({ x: -1 + 'rem', y: 0.5 + 'rem', opacity: 0 })
              .show()
              .transition({ x: 0, y: 0, opacity: 1 }, 750);
            cor
              .eq(1)
              .css({ x: 1 + 'rem', y: -0.5 + 'rem', opacity: 0 })
              .show()
              .transition({ x: 0, y: 0, opacity: 1 }, 750);
          },
        },
      });
      $('.detail .cont .txt').show();
    }, 1600);
    self.initEvent(box, self.data[index].foodSrc);
  },
};
